<template>
  <view class="container">
    <l-painter ref='painter' hidden />
    <view v-show="path">
      <view class="canvas">
        <!-- 画板 -->
        <image :src="path" style="width: 650rpx;height: 960rpx;margin: 0 auto;"></image>
        <view class="save-image">☝️长按二维码转发给朋友👆</view>
      </view>
      <view class="promotional-copy">
        <view class="title">收徒文案</view>
        <view class="copy">{{promotionalText}}</view>
        <view class="copy-button" @click="onCopyText(promotionalText)">复制推广文案发给好友</view>
      </view>
    </view>
  </view>
	<!-- 红包弹框组件 -->
	<redPacket/>
</template>

<script setup>
  import { ref } from "vue"
  import { onReady } from "@dcloudio/uni-app";
	import baseUrl from "@/config.js";
  onReady(() => {
		init()
  })
	
  // 海报ref
  let painter = ref(null)
  let poster = ref({
    css: {
      // 根节点若无尺寸，自动获取父级节点
      width: '650rpx',
      css: {
        margin: 'auto'
      }
    },
    views: [{
      css: {
        backgroundImage: "url(@/static/images/qr-code/qr-code-bg.png)",
        height: "960rpx",
        width: "650rpx",
        display: "inline-block",
        margin: 'auto'
      },
      type: "view",
      views: []
    }]
  })
  // 二维码JSON数据
  let qrCodeValue = ref({
    type: 'qrcode',
    text: '',
    css: {
      width: '270rpx',
      height: '270rpx',
      position: "absolute",
      left: '197rpx',
      bottom: '210rpx'
    }
  })
  // 存储海报生成的图片路径
  let path = ref('')
  // 推广文案
  let promotionalText = ref("")
  // 绘制渲染海报
  const onRender = async () => {
    uni.showLoading({
      mask: true
    })
    poster.value.views[0].views.push(qrCodeValue.value)
    // 传入json数据生成
    await painter.value.render(poster.value)
    painter.value.canvasToTempFilePathSync({
      fileType: "png",
      // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
      pathType: 'url',
      quality: 1,
      success: (res) => {
        // console.log('生成图片', res);
        path.value = res.tempFilePath
        uni.hideLoading()
      }
    })
  }
	const init = () => {
		if(uni.getStorageSync('userInfo')) {
			let redirectUrl = encodeURIComponent(`${baseUrl.wxLoginRedirectUrl}/pages/login/login?InviteCode=${JSON.parse(uni.getStorageSync('userInfo')).userId}`);
			let link = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx2f511ecc6b61661b&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo#wechat_redirect`
			promotionalText.value = `推荐阅读--->${link}(如无法打开，请复制链接在手机浏览器打开，获取最新入口)`
			qrCodeValue.value.text = link
			// 调用海报绘制
			onRender()
		}else {
			uni.showToast({
				title: "没有获取到推广链接",
				icon: "none"
			})
		}
		
		
	}
  // 复制文案
  const onCopyText = (value) => {
    uni.setClipboardData({
      data: value,
      success: function () {
        uni.showToast({
          title: '已复制该文本',
          icon: 'none'
        })
      }
    });
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 20rpx 0;

    .canvas {
      display: flex;
      flex-direction: column;
      align-items: center;

      .save-image {
        font-size: 38rpx;
				font-weight: bold;
				text-shadow: 1px 1px 1px black;
        color: #ff0000;
				letter-spacing: 2px;
        text-align: center;
				margin-top: 20rpx;
      }
    }

    .promotional-copy {
      .title {
        font-size: 30rpx;
        font-family: SourceHanSansCN;
        font-weight: 400;
        color: #302C2D;
        padding: 20rpx;
        border-bottom: 2rpx solid #CDCDCD;
      }

      .copy {
        width: 694rpx;
        background: #FFFFFF;
        border: 2rpx solid #CDCDCD;
        word-break: break-all;
        padding: 20rpx;
        margin: 20rpx auto;
      }

      .copy-button {
        width: 400rpx;
        height: 70rpx;
        background: #FFFFFF;
        border: 2rpx solid #96CAA6;
        border-radius: 10rpx;
        font-size: 30rpx;
        font-family: SourceHanSansCN;
        font-weight: 400;
        color: #57BE76;
        line-height: 66rpx;
        text-align: center;
        margin: 20rpx auto;
      }
    }
  }
</style>